<template>
	<view class="vehicle-container">
		<uni-forms ref="form" :value="vehicle" labelWidth="80px">
			<uni-forms-item name="licensePlate" label="车牌号码">
				<uni-easyinput v-model="vehicle.licensePlate" placeholder="请输入车牌号码" />
			</uni-forms-item>
			<uni-forms-item name="brand" label="车辆品牌">
				<uni-easyinput v-model="vehicle.brand" placeholder="请输入车辆品牌" />
			</uni-forms-item>
			<uni-forms-item name="model" label="车辆型号">
				<uni-easyinput v-model="vehicle.model" placeholder="请输入车辆型号" />
			</uni-forms-item>
			<uni-forms-item name="color" label="车辆颜色">
				<uni-easyinput v-model="vehicle.color" placeholder="请输入车辆颜色" />
			</uni-forms-item>
			<uni-forms-item name="vehicleCategory" label="车辆类别">
				<!-- <uni-easyinput v-model="vehicle.vehicleCategory" placeholder="请输入车辆类别" /> -->
				<uni-data-select v-model="vehicle.vehicleCategory" placeholder="请选择车辆类别" :localdata="vehicleTypeDict"
					@change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="seatCount" label="座位数量">
				<uni-easyinput v-model="vehicle.seatCount" placeholder="请输入座位数量" />
			</uni-forms-item>

			<button type="primary" @click="submit">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		request
	} from "http"

	import {
		listVehicle,
		getVehicle,
		addVehicle,
		updateVehicle
	} from "@/api/kk/vehicle"

	import {
		getDicts
	} from "@/api/system/dict/data"

	import {
		dicTrans
	} from "@/utils/kkTools"

	export default {
		data() {
			return {
				vehicle: {
					vehicleId: undefined,
					userId: undefined,
					licensePlate: undefined,
					brand: undefined,
					model: undefined,
					color: undefined,
					vehicleCategory: undefined,
					seatCount: undefined,
					vehiclePhoto: undefined
				},
				vehicleTypeDict: [],
				rules: {
					licensePlate: {
						rules: [{
							required: true,
							errorMessage: '车牌号码不能为空'
						}]
					},
					brand: {
						rules: [{
							required: true,
							errorMessage: '车辆品牌不能为空'
						}]
					},
					model: {
						rules: [{
							required: true,
							errorMessage: '车辆型号不能为空'
						}]
					},
					color: {
						rules: [{
							required: true,
							errorMessage: '车辆颜色不能为空'
						}]
					},
					vehicleCategory: {
						rules: [{
							required: true,
							errorMessage: '车辆类别不能为空'
						}]
					},
					seatCount: {
						rules: [{
							required: true,
							errorMessage: '座位数量不能为空'
						}]
					},
				}
			}
		},
		created() {
			this.vehicle.userId = localStorage.getItem('userId');
			listVehicle(this.vehicle.userId).then(response => {
				this.loading = true
				listVehicle(this.vehicle).then(response => {
					this.vehicle = response.rows[0]
					this.loading = false
				})
			})
			getDicts('vehicle_type_dict').then(response => {
				dicTrans(response.data, this.vehicleTypeDict)
			})
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			submit() {
				if (this.vehicle.vehicleId > 0) {
					this.$refs.form.validate().then(res => {
						updateVehicle(this.vehicle).then(response => {
							this.vehicle = response.data;
							this.$modal.msgSuccess("修改车辆信息成功")
						})
					})
				} else {
					this.$refs.form.validate().then(res => {
						addVehicle(this.vehicle).then(response => {
							this.vehicle = response.data;
							this.$modal.msgSuccess("添加车辆信息成功")
						})
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.vehicle-container {
		padding-top: 36rpx;
		padding: 15px;
	}
</style>